<template>
  <div class="task-view-result">
    <div class="task-roles">
      <!-- <span class="tag" v-for="(item, index) in taskRoles" :key="index" :type="item.tagType" @click.native="checkTag(index)">{{item.taskRoleStatus.name}}</span> -->
      <el-tabs v-model="activeIndex" type="card" @tab-click="checkTag">
        <el-tab-pane v-for="(item, index) in taskRoles" :label="item.name" :name="String(index)" :key="index" >
          <div>
            <div class="task-line">
              <span class="title">Task Role：</span>
              <span>{{ item.taskRoleName || '-' }}</span>
            </div>
            <div class="task-line">
              <span class="title">Index：</span>
              <span>{{ item.index || '-' }}</span>
            </div>
            <div class="task-line">
              <span class="title">IP：</span>
              <span>{{ item.ip || '-' }}</span>
            </div>
            <div v-if="item.podName" class="task-line">
              <span class="title">Container Name：</span>
              <span>{{ item.podName }}</span>
            </div>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
    <div class="task-detail">
      <div class="detail-line"><span class="title">详情</span></div>
      <div class="detail-line"><span>状态：</span><span>{{ curTaskInfo.taskStatus }}</span></div>
      <div class="detail-line"><span>开始时间：</span><span>{{ new Date(curTaskInfo.createdTime).Format("yyyy-MM-dd hh:mm:ss") }}</span></div>
      <div class="detail-line"><span>用时：</span><span>{{ curTaskInfo.duration }}</span></div>
      <div class="detail-bottom" @click="viewMoreConfig"><span>查看更多参数配置 >></span></div>
    </div>
    <pre class="result-box" v-html="result" />
  </div>
</template>

<script>
import axios from 'axios'
import { getTaskDetail } from '@/api/task'
import { mapGetters } from 'vuex'
export default {
  data() {
    return {
      result: '',
      taskRoles: [],
      activeIndex: 0,
      logUrl: '', // 请求日志的接口
      logTimeStart: 0, // 日志查询起始时间
    }
  },
  computed: {
    ...mapGetters([
      'curTaskInfo'
    ])
  },
  mounted() {
    this._getTaskDetail()
  },
  methods: {
    // 选择Tag
    checkTag(e) {
      this.activeIndex = String(e.index)
      this._getLogContent(this.taskRoles[e.index])
    },
    // 查看更多参数
    viewMoreConfig() {
      this.$router.push({ path: '/task/detail/config' })
    },
    /*
      -----接口调用-----
    */
    // 查询任务详情
    _getTaskDetail() {
      const para = `/${this.curTaskInfo.taskName}`
      getTaskDetail(para).then(res => {
        if (res.message.code === 0) {
          this.taskRoles = []
          const list = res.data.data.taskStatuses || []
          list.forEach(el => {
            el.name = el.taskRoleName + ' ' + el.index
            this.taskRoles.push(el)
          })
          this.taskRoles.forEach((el, i) => {
            if (i === 0) {
              el.tagType = ''
              this._getLogContent(el)
            } else {
              el.tagType = 'info'
            }
          })
          this.$store.dispatch('SaveCurTaskConf', res.data.jobConfig)
        } else {
          this.$message({ message: res.message.message, showClose: true, type: 'error' })
        }
      })
    },
    // 获取日志
    _getLogContent (task = {}) {
      // 更换了子任务的日志查询
      if (task.createdTime && task.logAddress !== this.logUrl) {
        this.logUrl = task.logAddress
        this.logTimeStart = task.createdTime * 1000000000
      }
      let logUrl = `/restserver/logHandle${this.logUrl.parseURL().path}?pageSize=5000&direction=0&start=${this.logTimeStart}`
      axios({
        method: 'get',
        url: logUrl
      }).then(res => {
        const list = res.data.data.logs || []
        list.forEach(row => {
          this.result += row.content + '<br>'
          // eslint-disable-next-line no-undef
          this.logTimeStart = BigInt(row.timestamp) + BigInt(1)
        })
      })
    },
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.task-view-result .task-roles {
  width: 60%;
  height: 200px;
  display: inline-block;
  margin-bottom: 30px;
}
.task-view-result .task-roles .task-line {
  height: 30px;
  line-height: 30px;
}
.task-view-result .task-detail {
  width: 30%;
  height: 200px;
  float: right;
  background: #f4f4f5;
  margin-bottom: 30px;
  padding: 20px;
  box-sizing: border-box;
  position: relative;
}
.task-view-result .task-detail .detail-line {
  height: 20px;
  line-height: 20px;
}
.task-view-result .task-detail .detail-bottom {
  position: absolute;
  bottom: 20px;
  color: #40aaff;
  cursor: pointer;
}
.task-view-result .title {
  font-weight: bold;
  margin-right: 5px;
}
.task-view-result .tag {
  background-color: rgba(64,158,255,0.1);
  display: inline-block;
  padding: 0 10px;
  height: 32px;
  line-height: 30px;
  font-size: 12px;
  color: #409eff;
  border-radius: 4px;
  box-sizing: border-box;
  border: 1px solid rgba(64,158,255,0.2);
  white-space: nowrap;
}
.task-view-result .no-data {
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>
